<template>
    <view>
        <view class="cart_list">
            <view class="empty" v-if="state.isShow == false">
                <u-image src="/static/cart/cart.jpg" mode="widthFix" style="width: 400rpx;"></u-image>
                <view class="empty-button" @click="goshopping">去选购</view>
            </view>
            <view v-if="state.isShow == true">
                <view class="goods-detail" v-for="(item, index) in goods" :key="index">
                    <view class="detail-left">
                        <view class="goods-left">
                            <!-- <u-checkbox-group @change="selected(item)">
                                <label>
                                    <u-checkbox class="selected" color="#555555" :checked="checked" /><text></text>
                                </label>
                            </u-checkbox-group> -->
                            <u-image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;"></u-image>
                        </view>
                        <view class="size">
                            <text style="font-size: 25rpx;">尺码：{{ item.size }}</text>
                            <text class="goods-price">￥{{ item.price }}/件</text>
                        </view>
                    </view>
                    <view class="detail-right">
                        <text class="subtract" @click="reduce(item)">-</text>
                        <text class="num">{{ item.num }}</text>
                        <text @click="add(item)" class="add">+</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="end">
            <view class="end-left">
                <checkbox-group @change="selectgoods()">
                    <label>
                        <checkbox :checked="allchecked" color="#212029" />全选
                    </label>
                </checkbox-group>
                <view>
                    总计：<text style="color: #212029;font-weight: bold;">￥ {{ totalPrice }}</text>
                </view>
            </view>
            <view class="end-right">
                结算({{ totalNum }})
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive } from 'vue';
const state = reactive({
    isShow: true,
    
})
</script>

<style lang="scss">
.goods {
    line-height: 80rpx;
    background-color: #FFFFFF;

    &-detail {
        display: flex;
        padding: 30rpx 15rpx 30rpx 30rpx;
        background-color: #fff;
        justify-content: space-between;
        border-bottom: 5rpx solid #F1F1F1;
        align-items: center;

        .detail-left {
            display: flex;

            .goods-left {
                display: flex;
                align-items: center;
            }
        }

        .size {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            margin-left: 30rpx;

            .goods-price {
                font-size: 25rpx;
                color: #212029;

            }
        }

        .detail-right {
            text {
                width: 50rpx;
                line-height: 50rpx;
                text-align: center;
                display: inline-block;
                background-color: #F7F7F7;
                margin-right: 10rpx;
            }

            .add {
                color: #fff;
                margin-right: 20rpx;
                background-color: #212029;

            }

            .subtract {
                background-color: #fff;
                color: #212029;
                border: 1rpx solid #212029;
                // border-radius: 30rpx 10rpx 10rpx 30rpx;
            }
        }
    }
}

.empty {

    position: relative;
    top: 100rpx;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;

    &-text {
        color: #808080;
        margin-bottom: 50rpx;
    }

    &-button {
        width: 300rpx;
        height: 90rpx;
        color: orange;
        border: 1rpx solid orange;
        text-align: center;
        line-height: 90rpx;
        border-radius: 48rpx;
    }
}

.cart_list {
    height: calc(100vh - 90rpx);
    overflow-y: auto;
}

.end {
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    // position: fixed;
    // bottom: 100rpx;
    left: 0;
    display: flex;
    align-items: center;

    &-left {
        width: 70%;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;

        .end-flex {
            display: flex;
            align-items: center;
        }
    }

    &-right {
        width: 30%;
        line-height: 90rpx;
        background-color: #212029;
        text-align: center;
        color: #fff;
    }
}
</style>

